<template>
  <el-row>
    <el-card>
      <div slot="header">
        <span>应用访问量</span>
        <div class="hidden-xs-only">
          <el-date-picker v-model="date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="handleDateChange" />
        </div>
      </div>
      <el-row :gutter="18">
        <el-col :span="18" :xs="24">
          <div ref="echart" style="width: 100%;height: 500px;" />
        </el-col>
        <el-col :span="6" :xs="24" class="rank_list">
          <span>应用访问量排名</span>
          <ul>
            <li v-for="(item, index) in rankList" :key="index">
              <div>
                <span :class="`rank ${index + 1 <= 3 ? 'rank_black' : 'rank_grey'}`">{{ index + 1 }}</span>
                <span class="name">{{ item.name }}</span>
              </div>
              <span class="count">{{ item.count }}</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-card>
  </el-row>
</template>

<script>
import 'element-ui/lib/theme-chalk/display.css'
import * as echarts from 'echarts'
import { getClientRankList, getClientVisitStc } from '@/api/dashboard'
import { parseTime } from '@/utils'

export default {
  name: 'Statistics',
  data() {
    return {
      params: {
        type: undefined,
        startTime: undefined,
        endTime: undefined
      },
      date: [],
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本月',
          onClick(picker) {
            const start = new Date()
            start.setDate(1)

            const end = new Date()
            end.setMonth(end.getMonth() + 1)
            end.setDate(0)

            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本周',
          onClick(picker) {
            const start = new Date()
            const end = new Date()
            start.setDate(start.getDate() - start.getDay() + 1)
            end.setDate(end.getDate() + 6 - end.getDay() + 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本年',
          onClick(picker) {
            const start = new Date()
            const end = new Date()
            start.setMonth(0)
            start.setDate(1)
            end.setMonth(12)
            end.setDate(0)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      rankList: [],
      chart: undefined,
      options: {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '14%',
          containLabel: true
        },
        toolbox: {
          right: '3%',
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {
              show: true
            },
            magicType: {
              type: ['bar', 'line']
            }
          }
        },
        dataZoom: [
          {
            type: 'slider'
          },
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: []
      }
    }
  },
  created() {
    this.dateInit()
    this.getClientRankList()
    this.getClientVisitStc()
  },
  mounted() {
    this.initChart()
  },
  methods: {
    getClientRankList() {
      getClientRankList(this.params).then(res => {
        this.rankList = res.data
      })
    },
    getClientVisitStc() {
      getClientVisitStc(this.params).then(res => {
        this.options.xAxis.data = res.data.xAxis
        this.options.series = res.data.series
        this.chart.setOption(this.options)
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.echart)

      const watchCharts = new ResizeObserver(() => {
        this.chart.resize()
      })

      // 使用observe开启监听, onObserve可以取消监听
      watchCharts.observe(this.$refs.echart)
    },
    dateInit() {
      const startTime = new Date()
      startTime.setMonth(0)
      startTime.setDate(1)
      this.params.startTime = parseTime(startTime.getTime())

      const endTime = new Date()
      endTime.setFullYear(endTime.getFullYear() + 1)
      endTime.setMonth(0)
      endTime.setDate(0)
      this.params.endTime = parseTime(endTime.getTime())

      this.date[0] = startTime
      this.date[1] = endTime
    },
    handleDateChange(val) {
      if (val) {
        this.params.type = undefined
        this.params.startTime = parseTime(val[0])
        this.params.endTime = parseTime(val[1])
      } else {
        this.dateInit()
      }
      this.getClientRankList()
      this.getClientVisitStc()
    }
  }
}

</script>

<style scoped lang="scss">
.el-row {
  border-bottom: 25px;
}

::v-deep.el-card {
  .el-card__header {
    padding: 15px 20px;

    div {
      display: flex;
      justify-content: space-between;
      align-items: center;

      div > .el-button {
        color: #333333;
      }

      div > .el-date-editor {
        margin-left: 10px;
      }
    }
  }
}

.rank_list {
  ul {
    list-style: none;
    padding: 0;

    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;

      .rank {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-top: 1.5px;
        margin-right: 10px;
        font-weight: 600;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        border-radius: 20px;
      }

      .rank_black {
        color: #fff;
        background-color: rgba(0, 0, 0, 0.85);
      }

      .rank_grey {
        color: #000;
        background-color: rgba(0, 0, 0, 0.06);
      }

      .name {
        flex: 1;
        margin-right: 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>
